<template>
  <div class="info">
    <el-form v-if="sceneStore.sceneDetail" :model="sceneStore.sceneDetail" label-position="top">
      <el-form-item
        label="场景名称"
        prop="activityName"
        :rules="[{ required: true, message: '场景名称不能为空' }]"
      >
        <el-input
          v-model="sceneStore.sceneDetail.activityName"
          :maxlength="50"
          placeholder="设置一个场景标题，不超过50个字符"
        />
      </el-form-item>

      <el-form-item label="所属项目" prop="projectId">
        <el-select popper-class="dark-select-popper" v-model="sceneStore.sceneDetail.projectId">
          <el-option
            v-for="list in proListData"
            :key="list.projectId"
            :label="list.projectName"
            :value="list.projectId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="场景描述" prop="actDesp">
        <el-input
          v-model="sceneStore.sceneDetail.actDesp"
          type="textarea"
          :rows="5"
          :maxlength="200"
          placeholder="简述场景描述，最多支持200个字符"
        />
      </el-form-item>

      <el-form-item label="场景封面" prop="cover">
        <div class="image-placeholder">
          <el-image
            v-if="sceneStore.sceneDetail.actCover"
            :src="cover"
            class="avatar"
            fit="cover"
          />
          <SvgIcon v-else icon-class="ic_图片" />
        </div>
        <div class="tips">将当前视角截图设置为场景封面。</div>
        <el-button type="primary" @click="setCover">设置封面</el-button>
      </el-form-item>

      <el-form-item label="场景视角" prop="view">
        <div class="image-placeholder">
          <el-image
            v-if="sceneStore.sceneDetail.actViewAngle"
            :src="viewAngleCover"
            class="avatar"
            fit="cover"
          />
          <SvgIcon v-else icon-class="ic_图片" />
        </div>
        <div class="tips">将当前视区域设置为初始视角，下次进入场景后将自动飞行至该视角。</div>
        <el-button type="primary" @click="setDefaultView">设置初始视角</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import { retFilePath, myHtml2canvas } from '@/utils';
import { commonUpload } from '@/api/common';
import { CommonUploadResp } from '@/api/common/types';
import { GetProListByMuCond } from '@/api/project';
import { useRequest } from '@jl/common/composable';

defineOptions({
  name: 'SceneInfo',
});

interface IProps {
  data: null | API.Scene.Scene;
}

const props = withDefaults(defineProps<IProps>(), {
  data: null,
});

const { run, data } = useRequest<any, any>(GetProListByMuCond, []);

const proListData = computed(() => {
  return data.value.list || [];
});

const sceneStore = useSceneStore();
const screenShotIconVisible = ref<boolean>(false);

const cover = computed(() => {
  if (!sceneStore.sceneDetail || !sceneStore.sceneDetail.actCover) return '';
  if (sceneStore.sceneDetail.actCover.indexOf('base64') > -1) {
    return sceneStore.sceneDetail.actCover;
  }
  return retFilePath(sceneStore.sceneDetail.actCover);
});

const viewAngleCover = computed(() => {
  if (!sceneStore.sceneDetail || !sceneStore.sceneDetail.actViewAngle) return '';
  if (sceneStore.sceneDetail.actViewAngle.indexOf('base64') > -1) {
    return sceneStore.sceneDetail.actViewAngle;
  }
  return retFilePath(sceneStore.sceneDetail.actViewAngle);
});

onMounted(() => {
  run({
    params: {
      index: 1,
      pageSize: 1000,
      blurStr: '',
      state: -1,
    },
  });
});

function setCover() {
  screenShotIconVisible.value = true;
  myHtml2canvas(document.getElementById('cesiumContainer') as any).then(async (file: any) => {
    const res: CommonUploadResp = await commonUpload(file);
    sceneStore.sceneDetail!.actCover = res.files[0].refAddress;
    setTimeout(() => {
      screenShotIconVisible.value = false;
    }, 400);
  });
}
function setDefaultView() {
  const { cimInstance } = window;
  if (!sceneStore.sceneDetail) return;
  screenShotIconVisible.value = true;
  myHtml2canvas(document.getElementById('cesiumContainer') as any).then(async (file: any) => {
    const res: CommonUploadResp = await commonUpload(file);
    sceneStore.sceneDetail!.actViewAngle = res.files[0].refAddress;
    const cameraParam = cimInstance.api.getCameraParameter();
    const camaraParamter = {
      longitude: cameraParam.longitude,
      latitude: cameraParam.latitude,
      height: cameraParam.height,
      heading: cameraParam.heading,
      pitch: cameraParam.pitch,
    };
    cimInstance.api.setCameraParameter(camaraParamter);
    setTimeout(() => {
      screenShotIconVisible.value = false;
    }, 400);
  });
}
</script>

<style lang="less" scoped>
.info {
  height: 100%;
  padding: 18px 20px;
  overflow-y: auto;
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  .image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 136px;
    background: #585b5f;
    border-radius: 4px;
    border: 1px solid rgba(69, 72, 81, 0.6);
    overflow: hidden;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .svg-icon {
      font-size: 42px;
    }
  }
  .tips {
    width: 100%;
    margin: 8px 0;
    color: #9a9a9a;
    font-size: 12px;
    line-height: 17px;
  }
}

.screenShotIcon {
  position: fixed;
  left: calc(50% + 30px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 200px);
  height: calc(100vh - 400px);
}
</style>
